<template>
	<view class="common-content">
		<!-- <u-navbar title-color="#fff" back-icon-color="#333333" :is-fixed="true" :is-back="false">
			<view class="slot-wrap">
				<view class="slot-wrap-left" @tap="back">
					<u-icon name="arrow-left"></u-icon>
				</view>
				<view class="slot-wrap-title">我的动态</view>
				<text class="common-active-text" @click="publish">发布</text>
			</view>
		</u-navbar> -->
		<view class="common-content-box container">
			<view class="dynamic-card" v-for="(item,index) in dataList" :key="item.id" @click="toDetail(item)">
				<view class="dynamic-card-top">
					<view class="dynamic-card-top-1">
						<u-tag color='#fff' :bg-color='getStatus(item.status).bgc' :text='getStatus(item.status).text'>
						</u-tag>
						<view class="card_title">
							{{item.title}}
						</view>
					</view>
					<view class="ellipsis2 card-desc">{{item.desc}}</view>
				</view>
				<view class="coverImg" v-if="item.videoUrl">
					<video class="video"  style="width: 100%" :src="item.videoUrl">
						<cover-image @click="toDetail(item)" class="inVideoImg" src="@/static/img/dynamic/opacity.png"></cover-image>
					</video>
				</view>

				<view class="dynamic-card-bottom">
					<view class="card-time">{{item.createTime}}</view>
					<view class="dynamic-card-bottom-2">
						<view class="frequency-row">
							<image src="@/static/img/common/comments.png" mode="" class="img"></image>
							<text>{{item.commentsNum || 0}}</text>
						</view>
						<view class="frequency-row">
							<image src="@/static/img/common/share.png" mode="" class="img"></image>
							<text>{{item.shareNum || 0}}</text>
						</view>
						<view class="frequency-row">
							<image src="@/static/img/common/collect.png" mode="" class="img"></image>
							
								<text>{{item.collectNum || 0}}</text>
						</view>
						<view class="frequency-row">
							<image src="@/static/img/courseBuy/praise2.png" mode="" class="img"></image>
							<text>{{item.likeNum || 0}}</text>
						
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="footer-more">
			<view class="view-more" v-if="dataList.length > 0">
				{{ isMore ? "上滑查看更多" : "没有更多了" }}
			</view>
			<view class="view-more" v-if="dataList.length == 0">
				暂无数据
			</view>
		</view>
		<!-- #ifdef H5 -->
		
	
		<u-mask :show="isShow" @click="isShow = false">
			<view class="modal">
				<view class="modal-line"></view>
				<view class="modal-cell1">
					<view class="modal-cell-1">分享你的点滴</view>
					<!-- <view class="modal-cell-2">
							<image class="pic2Img" src="@/static/img/dynamic/pic2.jpg" mode=""></image>
							<text class="modal-cell-2-text" @click="draft">草稿箱(3)</text>
					</view> -->
 
				</view>
				<view class="modal-cell2">
					<image 
						@click="publishVideo" 
						class="pic1Img" 
						src="@/static/img/dynamic/pic1.png" 
						mode="widthFix">
					</image>
				</view>
			</view>
		</u-mask>
			<!-- #endif -->
	</view>
</template>

<script>
	import {
		API
	} from "@/config/myApi.js";
	// import { filterAge } from "@/utils/filters.js";
	export default {
		data() {
			return {
				isShow: false,
				current: 0,
				dataList: [],
				params: {
					// expertId:this.$store.state.expertId,
					pageNumber: 1,
					pageSize: this.$store.state.rows,
				},
				rows: this.$store.state.rows,
				isMore: false,
				statusList: [
					{
						status: -1,
						bgc: '#dedede',
						text: '草稿'
					},
					{
						status: 4,
						bgc: '#F5454E',
						text: '未通过'
					},
					{
						status: 3,
						bgc: '#35B572',
						text: '已通过'
					},
					{
						status: 1,
						bgc: '#35B572',
						text: '已通过'
					},
					{
						status: 2,
						bgc: '#FFA341',
						text: '待审核'
					},

				]
			};
		},
		onShow() {
		
			if(this.dataList.length > 0) {
				const size = this.dataList.length+1
				this.dataList.length = 0
				this.getConsultByExpertId({
					pageNumber: 1,
					pageSize: size,
				})
			} else {
				this.getConsultByExpertId(this.params)
			}
			
		},
		onReachBottom() {
			if (this.isMore) {
				this.params.pageNumber++;
				this.getConsultByExpertId(this.params)
			}
		},
		onNavigationBarButtonTap(e) {
		    this.publish()
		},
		methods: {
			// 计算状态的别名
			getStatus(status) {
				return this.statusList.find(item => item.status === status) || this.statusList[0]
			},
			
			// 发布
			publish() {
				this.isShow = true
				// #ifdef APP-PLUS
				uni.getSubNVueById('dynamicPublish')
				.show('slide-out-top', 250)
			
				
				uni.$on('msgFromChild',()=> {
					this.publishVideo()
					
				})
				// #endif
			},
			// 跳转到发布动态页面
			publishVideo() {
				uni.navigateTo({
					url: "/pages/mine/dynamic/publishDynamic"
				})
			},
			back() {
				uni.switchTab({
					url: "/pages/tabbar/user/my"
				})
			},
			// 获取动态列表
			getConsultByExpertId(pram) {
				API.getDynamic(pram).then(res => {
					if (res.code == 200) {
						const result = res.result.records;
						this.dataList = [...this.dataList,...result];
						if (parseInt(res.result.total) > this.dataList.length) {
							this.isMore = true;
						} else {
							this.isMore = false;
						}
					} else {
						uni.showToast({
							title: res.message,
							icon: "none"
						})
					}
				})
				
			},
			
			toDetail(item) {
				// uni.setStorageSync("patientInfo", item);
				uni.navigateTo({
					url: "/pages/mine/dynamic/dynamicDetail?id=" + item.id
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.modal {
		background-color: #fff;
		border-radius: 32rpx;
		margin: 32rpx;
		padding: 42rpx;
		position: absolute;
		bottom: 10rpx;
		width: calc(100% - 64rpx);
		box-sizing: border-box;

		.pic1Img {
			width: 400rpx;
			// height: 100rpx;
			border-radius: 32rpx;
		}

		.modal-cell1 {
			display: flex;
			align-items: center;
			justify-content: space-between;
		}

		.modal-cell-1 {
			color: #a9a9a9;
		}

		.modal-cell2 {
			display: flex;
			justify-content: center;
			margin-top: 32rpx;
		}

		.modal-cell-2 {
			display: flex;
			align-items: center;

			.pic2Img {
				width: 40rpx;
				height: 40rpx;
				margin-right: 4rpx;
			}
		}
	}
.common-content-box {
	border-radius: 28rpx;
	margin: 30rpx 0;
}
	.dynamic-card {
		// margin-top: 30rpx;
		background-color: #fff;
		// border-radius: 28rpx;
		border-bottom: 1px solid #dedede;
		padding: 30rpx;
		width: 100%;

		.img {
			width: 100%;
		}

	}

	.dynamic-card-top {
		.dynamic-card-top-1 {
			display: flex;
		}

		.card-desc {
			color: #666666;
			margin-bottom: 6rpx;
		}

		.u-tag {
			border: none;
			margin-right: 10rpx;
			margin-bottom: 6rpx;
			min-width: 125rpx;
			font-size: 26rpx;
		}

		.card_title {
			font-size: 36rpx;
			color: #000;
			 overflow:hidden;
			 white-space:nowrap;
			 text-overflow: ellipsis;
		}
	}

	.dynamic-card-bottom {
		display: flex;
		justify-content: space-between;
		color: #9D9D9D;

		.card-time {
			font-size: 26rpx;
		}

		.dynamic-card-bottom-2 {
			display: flex;
			justify-content: space-between;
		}
	}

	.coverImg {
		width: 100%;
		.img {
			border-radius: 10rpx !important;
		}
	.video {
			position: relative;
		}
		.inVideoImg {
			position: absolute;
			top: 0%;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: 1;
			opacity: 0;
		}
	}

	.ellipsis {
		width: 100%;
		word-break: break-all;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		/* 这里是超出几行省略 */
		overflow: hidden;
	}

	.frequency-row {
		display: flex;
		align-items: center;
		margin-left: 22rpx;

		>.img {
			width: 26rpx;
			height: 26rpx;
			
		}

		>text {
			margin-left: 10rpx;
			color: #9D9D9D;
		}
	}
</style>
